<template>
  <div class='container'>
    <div class="app-container">

      <el-card>
        <el-row type="flex" justify="space-betwwen" style="margin-bottom: 10px;">
          <el-col :span="20" style="color:#ffc9d3;font-size: 12px;">说明：目前支持学科和关键字条件筛选</el-col>
          <el-col :span="4" style="font-size: 12px;border-radius: 3%;">
             <el-button icon="el-icon-edit" type="success" @click="addForm">新增</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form inline :model="form" ref="Form">
              <el-form-item  label="学科" prop="subjectID">
                <el-select v-model="form.subjectID" placeholder="请选择">
                  <el-option
                  v-for="item in subject" :key="item.value"
                  :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="二级目录" prop="catalogID">
                <el-select v-model="form.catalogID" @focus="focusCatalogID(form.subjectID)" placeholder="请选择">
                  <el-option
                  v-for="item in directorysList" :key="item.value"
                  :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="标签" prop="tags">
                <el-select v-model="form.tags" @focus="focusTags(form.subjectID)" placeholder="请选择">
                  <el-option
                  v-for="item in tagsList" :key="item.value"
                  :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="关键字" prop="keyword">
                <el-input v-model="form.keyword" placeholder="根据题干搜索"></el-input>
              </el-form-item>
              <el-form-item  label="试题类型" prop="questionType">
                <el-select v-model="form.questionType" placeholder="请选择">
                  <el-option
                   v-for="item in questionType" :key="item.value"
                   :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="难度" prop="difficulty">
                <el-select v-model="form.difficulty" placeholder="请选择">
                  <el-option
                  v-for="item in difficulty" :key="item.value"
                  :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="方向" prop="direction">
                <el-select v-model="form.direction" placeholder="请选择" @focus="focusDirec">
                  <el-option
                   v-for="item in direction" :key="item"
                    :label="item" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="录入人" prop="creatorID">
                <el-select v-model="form.creatorID" placeholder="请选择">
                  <el-option
                   v-for="item in userList"
                   :key="item.id"
                    :label="item.username"
                    :value="item.username">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="题目备注" prop="remarks">
                <el-input v-model="form.remarks" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item label="企业简称" prop="shortName">
                <el-input v-model="form.shortName" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item label="城市" prop="province">
                <el-select v-model="form.province" @focus="focusProvince" placeholder="请选择" style="width:115px;margin-right: 5px;">
                  <el-option
                   v-for="item in province" :key="item"
                    :label="item" :value="item">
                  </el-option>
                </el-select>
                <el-select v-model="form.city" @focus="focusCity(form.province)" placeholder="请选择" style="width:115px;margin-right: 5px;">
                  <el-option
                  v-for="item in city" :key="item"
                    :label="item" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button size="" @click="removeForm">清除</el-button>
                <el-button size="" type="primary" @click="getList">查询</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="全部" name="first">
            <el-row class="row-info">
              <el-col :span="24" class="col-info">
                <i class="el-icon-info"></i>
                <span>一共{{total}}条数据</span>
              </el-col>
            </el-row>
            <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column
                label="试题编号"
                prop="number"
                width="150">
              </el-table-column>
              <el-table-column
                prop="subjectID"
                :formatter="formatterSubject"
                label="学科">
              </el-table-column>
              <el-table-column
                prop="catalogID"
                label="目录">
              </el-table-column>
              <el-table-column
                prop="questionType"
                :formatter="formatterQuestion"
                label="题型">
              </el-table-column>
              <el-table-column prop="question" label="题干" width="300">
                <template #default="{row}">
                  {{ row.question | stripHTML }}
                </template>
              </el-table-column>
              <el-table-column
                prop="addDate"
                label="录入时间"
                width="120">
                <template #default="{row}">
                  {{ row.addDate | parseTimeByString }}
                </template>
              </el-table-column>
              <el-table-column prop="difficulty" label="难度" :formatter="formatterDiff"/>
              <el-table-column prop="creator" label="录入人" />
              <el-table-column prop="chkState" label="审核状态" :formatter="formatterState" />
              <el-table-column prop="chkRemarks" label="审核意见" />
              <el-table-column prop="chkUser" label="审核人" />
              <el-table-column prop="questionType" label="发布状态" :formatter="formatterQuestionType"/>
              <el-table-column
                fixed="right"
                label="操作"
                width="200">
                <template #default="{row}">
                  <el-button type="text" size="small" @click="previewFn(row)">预览</el-button>
                  <el-button type="text" size="small" @click="checkQuestion(row)" :disabled="row.chkState !== 0">审核</el-button>
                  <el-button type="text" size="small" @click="editForm(row)" :disabled="row.publishState === 1">修改</el-button>
                  <el-button type="text" size="small" @click="updateSate(row)">{{row.publishState===1?'上架':'下架'}}</el-button>
                  <el-button type="text" size="small" @click="deleteRow(row)" :disabled="row.publishState === 1">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="待审核" name="second">
            <el-row class="row-info">
              <el-col :span="24" class="col-info">
                <i class="el-icon-info"></i>
                <span>一共{{total}}条数据</span>
              </el-col>
            </el-row>
            <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column
                label="试题编号"
                prop="number"
                width="150">
              </el-table-column>
              <el-table-column
                prop="subjectID"
                :formatter="formatterSubject"
                label="学科">
              </el-table-column>
              <el-table-column
                prop="catalogID"
                label="目录">
              </el-table-column>
              <el-table-column
                prop="questionType"
                :formatter="formatterQuestion"
                label="题型">
              </el-table-column>
              <el-table-column prop="question" label="题干" width="300">
                <template #default="{row}">
                  {{ row.question | stripHTML }}
                </template>
              </el-table-column>
              <el-table-column
                prop="addDate"
                label="录入时间"
                width="120">
                <template #default="{row}">
                  {{ row.addDate | parseTimeByString }}
                </template>
              </el-table-column>
              <el-table-column prop="difficulty" label="难度" :formatter="formatterDiff"/>
              <el-table-column prop="creator" label="录入人" />
              <el-table-column prop="chkState" label="审核状态" :formatter="formatterState" />
              <el-table-column prop="chkRemarks" label="审核意见" />
              <el-table-column prop="chkUser" label="审核人" />
              <el-table-column prop="questionType" label="发布状态" :formatter="formatterQuestionType"/>
              <el-table-column
                fixed="right"
                label="操作"
                width="200">
                <template #default="{row}">
                  <el-button type="text" size="small" @click.native="previewFn(row)">预览</el-button>
                  <el-button type="text" size="small" @click.native="checkQuestion(row)" :disabled="row.chkState !== 0">审核</el-button>
                  <el-button type="text" size="small" @click="editForm(row)" :disabled="row.publishState === 1">修改</el-button>
                  <el-button type="text" size="small" @click="updateSate(row)">{{row.publishState===1?'上架':'下架'}}</el-button>
                  <el-button type="text" size="small" @click="deleteRow(row)" :disabled="row.publishState === 1">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="已审核" name="third">
            <el-row class="row-info">
              <el-col :span="24" class="col-info">
                <i class="el-icon-info"></i>
                <span>一共{{total}}条数据</span>
              </el-col>
            </el-row>
            <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column
                label="试题编号"
                prop="number"
                width="150">
              </el-table-column>
              <el-table-column
                prop="subjectID"
                :formatter="formatterSubject"
                label="学科">
              </el-table-column>
              <el-table-column
                prop="catalogID"
                label="目录">
              </el-table-column>
              <el-table-column
                prop="questionType"
                :formatter="formatterQuestion"
                label="题型">
              </el-table-column>
              <el-table-column prop="question" label="题干" width="300">
                <template #default="{row}">
                  {{ row.question | stripHTML }}
                </template>
              </el-table-column>
              <el-table-column
                prop="addDate"
                label="录入时间"
                width="120">
                <template #default="{row}">
                  {{ row.addDate | parseTimeByString }}
                </template>
              </el-table-column>
              <el-table-column prop="difficulty" label="难度" :formatter="formatterDiff"/>
              <el-table-column prop="creator" label="录入人" />
              <el-table-column prop="chkState" label="审核状态" :formatter="formatterState" />
              <el-table-column prop="chkRemarks" label="审核意见" />
              <el-table-column prop="chkUser" label="审核人" />
              <el-table-column prop="questionType" label="发布状态" :formatter="formatterQuestionType"/>
              <el-table-column
                fixed="right"
                label="操作"
                width="200">
                <template #default="{row}">
                  <el-button type="text" size="small" @click.native="previewFn(row)">预览</el-button>
                  <el-button type="text" size="small" @click.native="checkQuestion(row)" :disabled="row.chkState !== 0">审核</el-button>
                  <el-button type="text" size="small" @click="editForm(row)" :disabled="row.publishState === 1">修改</el-button>
                  <el-button type="text" size="small" @click="updateSate(row)">{{row.publishState===1?'上架':'下架'}}</el-button>
                  <el-button type="text" size="small" @click="deleteRow(row)" :disabled="row.publishState === 1">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="已拒绝" name="fourth">
            <el-row class="row-info">
              <el-col :span="24" class="col-info">
                <i class="el-icon-info"></i>
                <span>一共{{total}}条数据</span>
              </el-col>
            </el-row>
            <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column
                label="试题编号"
                prop="number"
                width="150">
              </el-table-column>
              <el-table-column
                prop="subjectID"
                :formatter="formatterSubject"
                label="学科">
              </el-table-column>
              <el-table-column
                prop="catalogID"
                label="目录">
              </el-table-column>
              <el-table-column
                prop="questionType"
                :formatter="formatterQuestion"
                label="题型">
              </el-table-column>
              <el-table-column prop="question" label="题干" width="300">
                <template #default="{row}">
                  {{ row.question | stripHTML }}
                </template>
              </el-table-column>
              <el-table-column
                prop="addDate"
                label="录入时间"
                width="120">
                <template #default="{row}">
                  {{ row.addDate | parseTimeByString }}
                </template>
              </el-table-column>
              <el-table-column prop="difficulty" label="难度" :formatter="formatterDiff"/>
              <el-table-column prop="creator" label="录入人" />
              <el-table-column prop="chkState" label="审核状态" :formatter="formatterState" />
              <el-table-column prop="chkRemarks" label="审核意见" />
              <el-table-column prop="chkUser" label="审核人" />
              <el-table-column prop="questionType" label="发布状态" :formatter="formatterQuestionType"/>
              <el-table-column
                fixed="right"
                label="操作"
                width="200">
                <template #default="{row}">
                  <el-button type="text" size="small" @click.native="previewFn(row)">预览</el-button>
                  <el-button type="text" size="small" @click.native="checkQuestion(row)" :disabled="row.chkState !== 0">审核</el-button>
                  <el-button type="text" size="small" @click="editForm(row)" :disabled="row.publishState === 1">修改</el-button>
                  <el-button type="text" size="small" @click="updateSate(row)">{{row.publishState===1?'上架':'下架'}}</el-button>
                  <el-button type="text" size="small" @click="deleteRow(row)" :disabled="row.publishState === 1">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <div class="footer">
          <template>
            <el-pagination
            background
            @current-change="getList"
            @size-change="getList"
            :current-page.sync="pageIndex"
            :page-size.sync="pageSize"
            :page-sizes="[5,10,15,20]"
            layout="prev, pager, next,sizes"
            :total="total">
            </el-pagination>
          </template>
          <div class="pages">
            前往
            <el-input class="num" v-model="pageIndex"></el-input>
            页
          </div>
        </div>
      </el-card>
    </div>
    <questionPriview ref="questionPriview"></questionPriview>
    <questionsCheck ref="questionsCheck"></questionsCheck>
  </div>
</template>

<script>
import { choice, choicePublish, remove } from '@/api/hmmm/questions.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { simpleSubject } from '@/api/hmmm/subjects.js'
import { simpleDirectorys } from '@/api/hmmm/directorys.js'
import { simpleTags } from '@/api/hmmm/tags.js'
import { simple } from '@/api/base/users'
import questionPriview from '../components/questions-preview.vue'
import questionsCheck from '../components/questions-check.vue'
import { questionType, difficulty, chkType, direction, publishType } from '@/api/hmmm/constants.js'
export default {
  components: {
    questionPriview,
    questionsCheck
  },
  data () {
    return {
      activeName: 'first',
      tableData: [],
      pageIndex: 1,
      pageSize: 5,
      total: 0,
      form: {},
      subject: [],
      questionType: [],
      difficulty: [],
      direction: [],
      chkState: '',
      province: [],
      city: [],
      userList: [],
      directorysList: [],
      tagsList: []
    }
  },
  filters: {
    stripHTML (str) {
      return str.replace(/(<([^>]+)>)/gi, '')
    }
  },
  created () {
    // 获取列表
    this.getList()
    // 录入人列表
    this.getUserList()
    // 获取目录 simpleDirectorys
    // this.getDirectoryList()
    // 获取标签简单列表
    // this.getTagsList()
  },
  methods: {
    async focusTags (val) {
      if (!val) {
        return
      }
      const el = await simpleTags(val)
      this.tagsList = el.data
    },
    async focusCatalogID (val) {
      if (!val) {
        return
      }
      const res = await simpleDirectorys(val)
      this.directorysList = res.data
    },
    // tab切换
    async handleClick () {
      if (this.activeName === 'frist') {
        this.chkState = ''
        this.getList()
      } else if (this.activeName === 'second') {
        this.chkState = 0
        // 精选列表
        const { data } = await choice({ ...this.form, chkState: this.chkState, page: this.pageIndex, pagesize: this.pageSize })
        // 简单学科列表
        const res = await simpleSubject()
        // console.log(data.items)
        this.total = data.counts
        this.subject = res.data
        this.tableData = data.items
      } else if (this.activeName === 'third') {
        this.chkState = 1
        // 精选列表
        const { data } = await choice({ ...this.form, chkState: this.chkState, page: this.pageIndex, pagesize: this.pageSize })
        // 简单学科列表
        const res = await simpleSubject()
        // console.log(data.items)
        this.total = data.counts
        this.subject = res.data
        this.tableData = data.items
      } else {
        this.chkState = 2
        // 精选列表
        const { data } = await choice({ ...this.form, chkState: this.chkState, page: this.pageIndex, pagesize: this.pageSize })
        // 简单学科列表
        const res = await simpleSubject()
        // console.log(data.items)
        this.total = data.counts
        this.subject = res.data
        this.tableData = data.items
      }
    },
    // 获取头部的录入人列表
    async getUserList () {
      const res = await simple()
      this.userList = res.data
    },
    // 页面数据获取
    async getList () {
      // 精选列表
      const { data } = await choice({ ...this.form, page: this.pageIndex, pagesize: this.pageSize })
      // 简单学科列表
      const res = await simpleSubject()
      // console.log(data.items)
      this.total = data.counts
      this.subject = res.data
      this.tableData = data.items
    },
    // 学科
    formatterSubject (row, column, cellValue, index) {
      const obj = this.subject.find(ele => ele.value === +cellValue)
      // console.log(obj)
      return obj.label ? obj.label : ''
    },
    // 题型
    formatterQuestion (row, column, cellValue, index) {
      this.questionType = questionType
      // console.log(cellValue)
      const type = questionType.find(ele => ele.value === +cellValue)
      return type && type.label
    },
    // 难度
    formatterDiff (row, column, cellValue, index) {
      this.difficulty = difficulty
      const diff = difficulty.find(ele => ele.value === +cellValue)
      return diff && diff.label
    },
    // 审核状态
    formatterState (row, column, cellValue, index) {
      const state = chkType.find(ele => ele.value === cellValue)
      return state && state.label
    },
    // 发布状态
    formatterQuestionType (row, column, cellValue, index) {
      // console.log(row)
      const type = publishType.find(ele => +ele.value === +cellValue)
      return type && type.label
    },
    // 头部方向
    focusDirec () {
      this.direction = direction
    },
    // 预览
    previewFn (row) {
      this.$refs.questionPriview.data = { ...row }
      this.$refs.questionPriview.previewVisible = true
    },
    // 上下架
    async updateSate (row) {
      console.log(row)
      this.visibleDialog = true
      await this.$confirm('确定要上架吗？', '提示', {
        type: 'warning'
      })
      await choicePublish(row)
      if (this.publicState !== 0) {
        this.$message.success('上架成功')
      } else {
        this.$message.success('下架成功')
      }
    },
    // 重置
    removeForm () {
      this.$refs.Form.resetFields()
      this.form = {}
      this.getList()
    },
    // 城市
    async focusProvince () {
      const res = await provinces()
      this.province = [...res]
    },
    // 区域
    async focusCity (pname) {
      if (pname === '') return ''
      const res = await citys(pname)
      this.city = [...res]
    },
    // 删除
    async deleteRow (row) {
      await this.$confirm('此操作将永久删除题目，是否继续？', '提示', {
        type: 'warning'
      })
      // 调用删除接口
      await remove(row)
      this.$message.success('删除成功')
      this.getList()
    },
    // 新增
    addForm () {
      this.$router.push('new')
    },
    // 修改
    editForm (row) {
      // 传数据
      this.$router.push({
        name: 'questions-new',
        query: { id: row.id } // 这种方式的传参必须要有路由的别名name
      })
    },
    // 审核
    checkQuestion (row) {
      this.$refs.questionsCheck.id = row.id
      this.$refs.questionsCheck.checkVisible = true
    }
  }
}
</script>

<style scoped lang='scss'>
.container{
  padding: 10px;
  margin: 10px 0;
  background-color: #eff1f4;
}
.row-info{
  height: 28px;
  line-height: 28px;
  padding: 0 10px;
  background-color: #f4f4f5;
  color: #909399;
  font-size: 13px;
  .el-icon-info{
    font-size: 16px;
    margin-right: 5px;
  }
}
.footer{
      margin-right: 0;
      display: flex;
      justify-content: end;
      height: 28px;
      line-height: 28px;
      margin-top: 20px;
      .pages{
        width: 120px;
        display: flex;
        .num{
          border: 1px solid #999;
          width: 46px;
          height: 28px;
          text-align: center;
          line-height: 28px;
        }
      }
    }
</style>
